<template>
    <ak-page-code>components</ak-page-code>
    <ak-title>AKjs前端框架</ak-title>
    <ak-main>
        <nav class="scrollbarfixed bg_white wp_94 bor_bottom bor_gray_ddd">
            <ol class="line_h_3rem">
                <li class="dis_inbl c_gray_777"><i class="icon-mn_weizhi"></i> 当前位置：</li>
                <li class="dis_inbl c_gray_777">首页 &gt; </li>
                <li class="dis_inbl c_gray_777">组件 &gt; </li>
                <li class="dis_inbl c_theme font_bold">AllChecked</li>
            </ol>
        </nav>
        <div class="module mt_2 ml_1">
            <section class="fl ml_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">使用方法</h3>
                </fieldset>
                <article class="pos_rel ovh h_35_rem bg_white">
                    <div class="plug_tabs_code wm_96">
                        <nav class="ovh press bg_white">
                            <ul class="ovh list_h_3rem nav_line_c length2">
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd pointer touchstart">插件调用</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd pointer touchstart">按需引入</li>
                            </ul>
                        </nav>
                        <article class="pos_rel ovh mt_2">
                            <div class="pos_rel ovh bg_white h_24_rem">
                                <section class="pos_rel ovh h_in">
                                </section>
                                <section class="pos_rel ovh h_in">
                                </section>
                            </div>
                        </article>
                    </div>
                    <fieldset class="wm_96 mt_2 mb_2">
                        <button type="button" class="plug_submit btn_h_au w_100 bg_theme c_white h_32rem">运行测试</button>
                    </fieldset>
                </article>
            </section>
            <section class="fr mr_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">效果展示</h3>
                </fieldset>
                <article class="pos_rel ova h_35_rem bg_white05">
                    <div class="plug_preview pa_2"></div>
                </article>
            </section>
        </div>
        <div class="module mt_2 ml_1">
            <section class="fl wm_96 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc" data-href="/mobile/sub_test">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">功能插件基本信息</h3>
                </fieldset>
                <article class="pos_rel ovh wp_96 pt_2 pb_2 bg_white">
                    <table class="border bor_gray_ddd">
                        <thead class="c_theme text_al_c list_h_3rem bor_top2 bor_theme">
                        <tr class="bor_bottom bor_gray_ddd line_h_100">
                            <th class="font_bold bor_right bor_gray_ddd">插件名称</th>
                            <th class="font_bold bor_right bor_gray_ddd">说明</th>
                            <th class="font_bold bor_right bor_gray_ddd">依赖的插件名</th>
                            <th class="font_bold bor_right bor_gray_ddd">按需引入方法</th>
                        </tr>
                        </thead>
                        <tbody class="c_gray_777 text_al_c list_h_24rem list_f9f_white bor_top bor_gray_ddd">
                        <tr class="bor_bottom bor_gray_ddd">
                            <td class="bor_right bor_gray_ddd font_bold">AKjs_AllChecked</td>
                            <td class="bor_right bor_gray_ddd">全选功能插件</td>
                            <td class="bor_right bor_gray_ddd">AKjs_Checkbox</td>
                            <td class="bor_right bor_gray_ddd">
                                <p class="text_al_l text_ind_2rem">AKjs_Plugin("AKjs_AllChecked"); //全选功能</p>
                                <p class="text_al_l text_ind_2rem">AKjs_Plugin("AKjs_Checkbox","css"); //复选框美化</p>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </article>
            </section>
        </div>
        <div class="module mt_2 ml_1">
            <section class="fl wm_96 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">功能插件参数说明</h3>
                </fieldset>
                <article class="pos_rel ovh wp_96 pt_2 pb_2 bg_white">
                    <table class="border bor_gray_ddd">
                        <thead class="c_theme text_al_c list_h_3rem bor_top2 bor_theme">
                        <tr class="bor_bottom bor_gray_ddd line_h_100">
                            <th class="font_bold bor_right bor_gray_ddd">参数</th>
                            <th class="font_bold bor_right bor_gray_ddd">说明</th>
                            <th class="font_bold bor_right bor_gray_ddd">类型</th>
                            <th class="font_bold bor_right bor_gray_ddd">可选值</th>
                            <th class="font_bold bor_right bor_gray_ddd">默认值</th>
                        </tr>
                        </thead>
                        <tbody class="c_gray_777 text_al_c list_h_24rem list_f9f_white bor_top bor_gray_ddd">
                            <tr class="bor_bottom bor_gray_ddd">
                                <td class="bor_right bor_gray_ddd">toggleClass</td>
                                <td class="bor_right bor_gray_ddd">改变的样式名，针对例子中的复选框样式美化</td>
                                <td class="bor_right bor_gray_ddd">string</td>
                                <td class="bor_right bor_gray_ddd">custom</td>
                                <td class="bor_right bor_gray_ddd">bg_theme bor_theme c_white icon-ln_zhengque</td>
                            </tr>
                            <tr class="bor_bottom bor_gray_ddd">
                                <th class="bor_right bor_gray_ddd">callback</th>
                                <td class="bor_right bor_gray_ddd">回调入口</td>
                                <td class="bor_right bor_gray_ddd">function</td>
                                <td class="bor_right bor_gray_ddd">array</td>
                                <td class="bor_right bor_gray_ddd">$(array)</td>
                            </tr>
                        </tbody>
                    </table>
                </article>
            </section>
        </div>
    </ak-main>
    <ak-plugin></ak-plugin>
</template>

<script type="text/javascript">
    //引入AKjs功能插件的区域
</script>

<style type="text/css">
    /*样式覆盖区域*/
    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }
    @keyframes opacity {
        to {
            opacity: 1;
        }
    }
    @keyframes opacity-reverse {
        to {
            opacity: 0;
        }
    }
    .ak-phonebox article {
        width: 379px;
        height: 673px;
        display: none;
    }
    .ak-phonebox article img {
        width: 379px;
        height: 653px;
        opacity: 0;
        animation: opacity 1.2s ease 1.2s forwards;
    }
    .ak-phonebox article svg {
        position: absolute;
        top: 0;
        left: 0;
        animation: opacity-reverse 0.5s linear 1.2s forwards;
    }
    .ak-phonebox article svg .path {
        stroke-dasharray: 5000;
        stroke-dashoffset: 5000px;
        animation: dash 4s linear forwards;
    }
    .ak-phonebox article svg .circle {
        stroke-dasharray: 500;
        stroke-dashoffset: 500px;
        animation: dash 3s linear forwards;
    }
    .ak-phonebox article svg .earcircle {
        stroke-dasharray: 46;
        stroke-dashoffset: 46px;
        animation: dash 1.5s linear forwards;
    }
    .ak-phonebox article svg .earphone {
        opacity: .8;
        stroke-dasharray: 200;
        stroke-dashoffset: 200px;
        animation: dash 1.5s linear forwards;
    }
    .ak-phonebox article svg .else {
        opacity: .5;
        stroke-dasharray: 60;
        stroke-dashoffset: 60px;
        animation: dash 1s linear forwards;
    }
    .ak-phonebox article .heiyo {
        width: 75px;
        height: 38px;
        position: absolute;
        bottom: 59px;
        left: 152px;
        display: block;
        border-radius: 40px;
        outline: 0;
    }
    .ak-phonebox article .iframe-box {
        width: 345px;
        height: 520px;
        position: absolute;
        background-color: #FFF;
        top: 56px;
        left: 17px;
        opacity: 0;
        border-radius: 5px;
        animation: opacity 1s ease 1.5s forwards;
        z-index: 9999;
    }
    .ak-phonebox article .iframe-box iframe {
        border-radius: 5px;
    }
</style>

<!--
//注：template，ak-page-code，ak-title，ak-plugin，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-page-code></ak-page-code>
    <ak-title></ak-title>
    <div></div>
    <ak-plugin></ak-plugin>
</template>
<script>
</script>
<style>
</style>
-->
